import React, {Component} from 'react';
import {
    StyleSheet, 
    View,
    Image,
    TextInput,
    TouchableOpacity,
} from 'react-native';
import DeviceInfo from 'react-native-device-info';
import { RRCToast } from 'react-native-overlayer';
import { getPixel, getScreenWidth, getScreenHeight } from '../common/common';

export default class HeaderBarWhite extends Component {

    constructor(props){
        super(props);
        this.state={
          keyword: '',
        }
    }
    
    openScan = () => {
        DeviceInfo.isCameraPresent()
        .then(isCameraPresent => {
            if((isCameraPresent || Platform.OS == 'ios') && DeviceInfo.getDeviceId() !== 'rk30sdk'){
                this.props.navigation.navigate('QBarCodeScanWhite', {
                    isGoBack: true,
                    isHaveCamera: true,
                    isRfid: false, 
                    tab: this.props.tab,
                    callBack: ( code ) => {
                        this.props.scan(code);
                    }        
                });
            }else if(isCameraPresent && DeviceInfo.getDeviceId() === 'rk30sdk'){
                if(DeviceInfo.getDeviceId() === 'rk30sdk'){
                    this.props.navigation.navigate('QBarCodeScanWhite', {
                        isGoBack: true,
                        isHaveCamera: true,
                        isRfid: true, 
                        tab: this.props.tab,
                        callBack: ( code ) => {
                            this.props.scan(code);
                        }        
                    });
                }else{
                    RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
                    return;
                }
            }else{ 
                if(DeviceInfo.getDeviceId() === 'rk30sdk'){
                    this.props.navigation.navigate('QBarCodeScanWhite', {
                        isGoBack: true,
                        isHaveCamera: false,
                        isRfid: true, 
                        tab: this.props.tab,
                        callBack: ( code ) => {
                            this.props.scan(code);
                        }        
                    });
                }else{
                    RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
                    return;
                }
                
            }
        })
        .catch(cameraAccessException => {
            RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
            return;
        });
    }

    submit = (e) => {
        this.props.submit(e.nativeEvent.text);
    }

    render() {
        return (
            <View style={styles.header}>
                <View style={{ width: getPixel(55), justifyContent:'center', alignItems:'center'}}>
                    <TouchableOpacity onPress={() => this.props.menuClink()}>
                    <Image source={ require('../images/homeGray.png')}  style={{ resizeMode: 'contain', width: getPixel(32), height: getPixel(20) }} />
                    </TouchableOpacity>
                </View>
                <View style={{  width: DeviceInfo.getDeviceId() !== 'rk30sdk' ? getScreenWidth() - getPixel(110): getScreenWidth() - getPixel(75), justifyContent:'center', alignItems:'center' }}>
                    <View style={{ width: DeviceInfo.getDeviceId() !== 'rk30sdk' ? getScreenWidth() - getPixel(120): getScreenWidth() - getPixel(75), backgroundColor: '#EFF1F8', height: getPixel(30), borderRadius: 20, flexDirection: 'row' }}>
                        <View style={{justifyContent: 'center'}}>
                            <Image source={ require('../images/search.png')}  style={{ resizeMode: 'contain', width: getPixel(26), height: getPixel(24), marginLeft: getPixel(10)}} />
                        </View>
                        <View style={{justifyContent: 'center'}}>
                            <TextInput underlineColorAndroid='transparent' onSubmitEditing={this.submit}  returnKeyType='search' value={this.props.keyWord} onChangeText={(text) => this.props.setKeyWord(text)} style={{ width: getScreenWidth() - getPixel(170), fontSize: getPixel(16), paddingLeft: getPixel(10), paddingVertical: 0 }} placeholder="搜索"/>
                        </View>
                    </View>
                </View>
                { DeviceInfo.getDeviceId() !== 'rk30sdk' ?
                <View style={{ width: getPixel(55), justifyContent:'center', alignItems:'center'}}>
                    <TouchableOpacity onPress={() => this.openScan()}>
                    <Image source={ require('../images/scanGray.png')}  style={{ resizeMode: 'contain', width: getPixel(28), height: getPixel(28) }} />
                    </TouchableOpacity>
                </View>:null
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({

    header: {
        backgroundColor: '#FFF',
        height: getPixel(50),
        width: getScreenWidth(),
        flexDirection: 'row',
    },

});